<template>
    <div class="login-box">
        <div class="login-title">
            <h2>管理员登录</h2>
        </div>
       <div class="avatar">
            <img src="../assets/liming.jpg"/>
       </div>
       <form action="" class="login-form" onsubmit="return false ">
            <input type="text" placeholder="账号" v-model="username" class="login-username">
            <input type="password" placeholder="密码" v-model="password" class="login-password" />
            <div class="log-button">
                <button type="submit" @click="mySubmit" class=" mybutton login-submit">登录</button>
                <button type="reset" class="mybutton login-reset">重置</button>
            </div>

       </form>
    </div>
</template>

<script>
import { login } from '../api/login.js';
import { ElMessage } from 'element-plus'

export default {
    name: "Login",
    data(){
        return{
            username: '',
            password: ''
        }
    },
    methods: {
        mySubmit(e){ 

            if(this.username == ''){
                ElMessage.error('用户名不能为空');
                return;
            }else if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username) && !(this.username == 'admin')){
                ElMessage.error('账号输入错误,请重新输入');
                return;
            }else if(this.password == ''){
                ElMessage.error('密码不能为空');
                return;
            };
            // 登录
            login({
                username: this.username,
                password: this.password
            }).then((resolve) => {

                if(resolve.code == "0"){
                    ElMessage.error('登录失败，请重新登录');    
                }else if(resolve.code == "1"){
                    const data = {
                        name: resolve.data.name
                    }
                    this.$store.commit('ADD_LOGIN_USER',JSON.stringify(data));
                    this.$router.push('/Admin');
                }
            })
        }
    },
    
}
</script>

<style lang="scss">
    .login-box{

        width: 500px;
        height: 400px;
        background-color: #fff ;
        margin: 50px auto;
        border-radius: 10px;
        overflow: hidden;
        
        

        .login-title{
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: 	#6495ED ;
        }

        .avatar{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid #000;

            img{
                width: 100%;
            }
        }

        .login-form{
            padding: 20px;
            .login-username{
                display: block;
                width: 100%;
                height: 40px;
            }

            .login-button{
                width: 100%;
            }

            .login-password{
                display: block;
                margin-top: 20px;
                width: 100%;
                height: 40px;
            }

            .mybutton{
                width: 50%;
                height: 40px;
                margin: 20px 0px;
            }
        }
    }
</style>